<template>
  <div class="img-list">
    <CloudSwitch v-model="checked" />
    <CloudImg :imgList="getImgList"></CloudImg>
  </div>
</template>

<script>
import normalImg from '../../../../src/assets/image/normal1.jpg';
import heightImg from '../../../../src/assets/image/height2.jpg';
import widthImg from '../../../../src/assets/image/width1.jpg';
import defaultImage from '../../../../src/assets/image/upload-error.svg';

export default {
  title: '5.修改默认展位图',
  subTitle: 'imglist传入defaultImage',
  data() {
    return {
      checked: false,
    }
  },
  computed: {
    getImgList() {
      let defalutImgList = [
        {
          type: '16:9',
          scale: 1.5,
          defaultImage
        },
        {
          type: '1:1',
          scale: 1.5,
          defaultImage: ''
        },
        {
          type: '4:3',
          scale: 1.5,
          defaultImage
        }
      ]
      let newImgList = [
        {
          type: '16:9',
          img: widthImg,
          scale: 1.5
        },
        {
          type: '1:1',
          img: normalImg,
          scale: 1.5
        },
        {
          type: '4:3',
          img: heightImg,
          scale: 1.5
        }
      ]
      return this.checked ? newImgList : defalutImgList
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.img-list {
  padding: 30px 0;
}
</style>